// Accordion.tsx
import React, { useState } from 'react';
import './vip.css';

// 定义菜单项的数据结构
interface AccordionItem {
  title: string;
  content: string;
}

// 定义组件的props接口
export interface AccordionProps {
  items: AccordionItem[];
}

export const Accordion: React.FC<AccordionProps> = ({ items }) => {
  // 使用useState来跟踪当前激活的菜单项索引
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  // 处理菜单项点击事件
  const handleItemClick = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <div className="accordion-container">
      {/* 左侧菜单列表 */}
      <div className="left-menu">
        {items.map((item, index) => (
          <div
            key={index}
            className="accordion-item"
            onClick={() => handleItemClick(index)}
          >
            <div className="item-header">
              <span className="expand-icon">{activeIndex === index ? '-' : '+'}</span>
              <span className="item-title">{item.title}</span>
            </div>
          </div>
        ))}
      </div>
      
      {/* 右侧内容区域 */}
      <div className="right-content">
        {activeIndex !== null && (
          <div className="content-panel">
            <div className="content-text">{items[activeIndex].content}</div>
          </div>
        )}
      </div>
    </div>
  );
};